body {
    background: url(../images/background.webp) no-repeat;
    background-size: cover;
    overflow-y: hidden;
}

.playground {
    width: 800px;
    margin: 400px auto;
    overflow: hidden;
}

.actor {
    float: left;
}

.actor:first-child {
    width: 200px;
    height: 180px;
    background: url(../images/west_01.png) no-repeat;
    /* TODO 填空 */
    animation: a1 0.8s steps(8) infinite;
}

.actor:nth-child(2) {
    width: 200px;
    height: 180px;
    background: url(../images/west_02.png) no-repeat;
    /* TODO 填空 */
    animation: a2 0.8s steps(8) infinite;
}

.actor:nth-child(3) {
    width: 170px;
    height: 240px;
    background: url(../images/west_03.png) no-repeat;
    /* TODO 填空 */
    animation: a3 0.8s steps(8) infinite;
}

.actor:last-child {
    width: 210px;
    height: 200px;
    background: url(../images/west_04.png) no-repeat;
    /* TODO 填空 */
    animation: a4 0.8s steps(8) infinite;
}

@keyframes a1 {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: -1600px;
    }
}

@keyframes a2 {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: -1600px;
    }
}

@keyframes a3 {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: -1360px;
    }
}

@keyframes a4 {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: -1680px;
    }
}
